<template>
	<div class="app-container">
		<titlename :navnum='navnum'></titlename>
		<div class="content">

			<el-form :model="json" :rules="rules" ref="json" label-width="100px" class="demo-ruleForm">
				<el-form-item class="informationaa" label="保险公司:" prop="insuranceId">
					<el-select :disabled="comeprev" class="selects" size="mini" v-model="json.insuranceId" placeholder="请选择保险公司" @change="changecomony(json.insuranceId)">
						<el-option-group v-for="group in options" :key="group.letter" :label="group.letter">
							<el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
							</el-option>
						</el-option-group>
					</el-select>
				</el-form-item>
				<el-form-item class="informationaa" label="批次名称:" prop="batchName">
					<el-input v-model="json.batchName" class="selects" size="mini" placeholder="请输入批次名称"></el-input>
				</el-form-item>
				<el-form-item class="informationaa" label="适用工号:" prop="staffId">
					<el-select :disabled="comeprev" class="selects" size="mini" multiple v-model="json.staffId" placeholder="请选择适用工号">
						<el-option class="selects" v-for="item in workoptions" :label="item.staffAccount" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item style="width:514px;" class="informationaa" :class="{'begin-error':errormsg.beginerror,'end-error':errormsg.enderror}" label="有效时间:" required>
					<datachange :json="json" v-on:inf='inf'></datachange>

					<div class="el-form-item__error" v-if="errormsg.beginerror||errormsg.enderror">
						{{errormsg.message}}
					</div>
					<div class="z-errorbox">
						<p class="z-error texts">
							<i class="iconfont icon-xuanzhong"></i> 以<span>{{chosedates}}</span>作为匹配日期类型
						</p>
					</div>

				</el-form-item>

				<!-- <el-form-item class="informationaa information_only" label=" ">
					
				</el-form-item> -->

				<el-form-item class="informationaa" label="是否奖励批次:">
					<el-checkbox :disabled="comeprev" class="" v-model="json.isReward"></el-checkbox>
				</el-form-item>

				<el-form-item class="informationaa" label="模板类型:">
					<div class="modeltype">
						<!--<p  :class="json.batchType==index?'choseactive':''" @click="actives(index)">{{item.name}}</p>
-->
						<el-radio-group v-model="json.batchType" size="mini" @change="aaa">
							<el-radio-button :label="item.value" :disabled="iscanedit" v-for="item in modellist">{{item.name}}</el-radio-button>
						</el-radio-group>
					</div>
				</el-form-item>

				<el-form-item v-if="json.batchType==0" class="informationaa informations" label="选择模板:" prop="">
					<el-select class="selects" size="mini" disabled v-model="json.batchTypeId" placeholder="请选择模板">
						<el-option class="selects" v-for="item in templatelist" :label="item.batchName" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item v-else class="informationaa informations" :class="{'is-error':mubanerror.error}" label="选择模板:" prop="batchTypeId">
					<el-select class="selects" size="mini" v-model="json.batchTypeId" placeholder="请选择模板">
						<el-option class="selects selectss" v-for="item in templatelist" :label="item.batchName" :value="item.id">
							<div>{{ item.batchName }}</div>
							<div class="seconr_text"><span>{{item.effectiveDate}} 到  </span>
								<span v-if="item.expiryDate">{{item.expiryDate}}</span>
								<span v-else>不限</span>
							</div>
						</el-option>
					</el-select>
					<div class="el-form-item__error" v-if="mubanerror.error">
						{{mubanerror.message}}
					</div>
					<div class="z-errorbox">
						<p class="z-error discriputetexts">
							{{discripute}}
						</p>
					</div>
				</el-form-item>
				<!-- <el-form-item class="informationaa" label=" ">
					<p class="discriputetexts">
						{{discripute}}
					</p>
				</el-form-item> -->
				<el-form-item>
					<el-button type="primary" :loading="loading" size="small" class="btn" @click="btn('json')">确定</el-button>
				</el-form-item>
			</el-form>
			<el-dialog title="提示" :visible.sync="dialogTableVisible" width="700px" class="toDis-dialog upper4-dialog" :close-on-click-modal="false">
				<p class="dialog-tit">
					{{nowmessage}}
					<!-- 当前批次“<span class="toblue">{{json.batchName}}</span>”与以下政策批次有效时间重叠，点击“确定”，系统将自动修改重叠批次的截止时间为当前批次的开始时间 {{json.effectiveDate}} -->
				</p>
				<div class="dialog-max">
					<div class="visi-wrp">
						<div class="visi-list">
							<div class="list_name">
								批次名称
							</div>
							<div class="list_time">
								有效时间
							</div>
							<template v-for="(item,index) in existence">
								<div class="list_name">
									{{item.batchName}}
								</div>
								<div class="list_time">
									{{item.effectiveDate}} -
									<span v-if="item.expiryDate">{{item.expiryDate}}</span>
									<span v-else>不限</span>
								</div>
							</template>
						</div>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button class="upper4-sureBtn" @click="goEdit" size="small" style="min-width:70px;">取消</el-button>
					<el-button class="upper4-sureBtn" type="primary" @click="toRoval_sure()" :loading="loadroval" size="small" style="min-width:70px;">确定</el-button>
				</div>
			</el-dialog>
			<!--不让修改-->
			<el-dialog title="提示" :visible.sync="candialogTableVisible" width="700px" class="toDis-dialog upper4-dialog" :close-on-click-modal="false">
				<p class="dialog-tit">
					{{nowmessage}}
				</p>
				<div class="dialog-max">
					<div class="visi-wrp">
						<div class="visi-list">
							<div class="list_name">
								批次名称
							</div>
							<div class="list_time">
								有效时间
							</div>
							<template v-for="(item,index) in existence">
								<div class="list_name">
									{{item.batchName}}
								</div>
								<div class="list_time">
									{{item.effectiveDate}} -
									<span v-if="item.expiryDate">{{item.expiryDate}}</span>
									<span v-else>不限</span>
								</div>
							</template>
						</div>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<!-- <el-button class="upper4-sureBtn" @click="candialogTableVisible=false" size="small" style="min-width:70px;">取消</el-button> -->
					<el-button class="upper4-sureBtn" type="primary" @click="candialogTableVisible=false" :loading="loadroval" size="small" style="min-width:70px;">关闭</el-button>
				</div>
			</el-dialog>

		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import titlename from './assembly/titlename'
	import datachange from '@/components/datachange/datachange'
	export default {

		data() {

			return {
				loadroval: false,
				dialogTableVisible: false,
				iscanedit: true,
				navnum: {
					name: "创建上游批次",
					icon: "iconfont icon-biaoti"
				},
				value: "",
				chosedates: "支付日期",
				islimit: true,
				options: [],
				workoptions: [],
				endateprop: "",
				rules: {
					batchName: [{
							required: true,
							message: '请输入批次名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 50,
							message: '长度在 1 到 50个字符',
							trigger: 'blur'
						}
					],
					insuranceId: [{
						required: true,
						message: '请选择保险公司',
						trigger: 'change'
					}],
					staffId: [{
						required: true,
						message: '请选择适用工号',
						trigger: 'change'
					}],
					effectiveDate: [{
						type: 'date',
						required: true,
						message: '请选择生效日期',
						trigger: 'change'
					}],
					expiryDate: [{
						type: 'date',
						required: true,
						message: '请选择截止日期',
						trigger: 'change'
					}],

				},
				modellist: [{
						name: "历史批次作为模板",
						value: 1
					},
					{
						name: "空白模板",
						value: 0
					},
					{
						name: "系统模板",
						value: 2
					}
				],
				json: {
					//					//真被观测批次id
					//					id: "",
					batchName: "",
					//公司id
					insuranceId: "",
					//工号id
					staffId: "",
					//开始
					effectiveDate: "",
					//结束
					expiryDate: "",
					//是奖励
					isReward: false,
					batchType: "",
					batchTypeId: ""
				},
				endDateOpt: this.enddate(),
				startDateOpt: this.startdate(),
				comeprev: false,
				islimits: true,
				staffId: [],

				templatelist: [],
				discripute: '',
				loading: false,
				existence: [],
				errormsg: {
					beginerror: false,
					enderror: false,
					message: ''
				},
				mubanerror: {
					error: false,
					message: ''
				},
				unli: true,
				candialogTableVisible: false,
				nowmessage: "",
				newid: ""
			}
		},
		mounted() {
			this.getcommoy()

		},
		methods: {
			//开始结束时间是否不限
			inf(val) {
				this.unli = val;
			},
			goEdit() {
				this.loading = false;
				this.dialogTableVisible = false
			},
			toRoval_sure() {
				this.dialogTableVisible = false;
				this.loadroval = true;
				this.getdatas()
				this.toupdate()
			},
			aaa(val) {
				console.log(val)
			},
			//			//tab切换
			//			actives(e) {
			//				console.log(e)
			//				this.json.batchType = e
			//				this.json.batchTypeId = ""
			//			},
			getinter() {
				let params = {
					id: this.json.id
				};
				this.post(params, "services/app/policy/GetPolicyBatchBasic").then(res => {
					if(res.success) {
						console.log("success")
						console.log(res)
						Vue.set(this.json, 'batchName', res.result.batchName)
						//this.json.batchName=res.result.batchName
						Vue.set(this.json, 'insuranceId', res.result.insuranceId)
						//insuranceId
						//this.json.insuranceId=res.result.batchName
						//this.json.staffId=res.result.staffNames

						var brr = []
						for(var i = 0; i < res.result.staffNames.length; i++) {
							this.staffId.push(res.result.staffNames[i].staffId) //staffAccount
							if(res.result.staffNames[i].describe != "") {
								brr.push(res.result.staffNames[i].staffAccount + " (" + res.result.staffNames[i].describe + ")")
							} else {
								brr.push(res.result.staffNames[i].staffAccount)
							}

							//this.workoptions[i].staffAccount+" ("+this.workoptions[i].describe+")"
						}
						Vue.set(this.json, 'staffId', brr)
						this.json.effectiveDate = res.result.effectiveDate
						this.json.isReward = res.result.isReward
						if(res.result.expiryDate) {
							console.log("true")
							this.json.expiryDate = res.result.expiryDate
							//this.islimits=false
						} else {
							console.log("false")
							this.json.expiryDate = ""
							//this.islimit=true
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}

				});
			},
			//开始时间
			startdate() {
				var that = this
				return {
					disabledDate(time) {
						if(that.json.expiryDate != "") {
							return time.getTime() > that.json.expiryDate
						}
					}
				}
			},
			//结束时间
			enddate() {
				var that = this
				return {
					disabledDate(time) {
						return time.getTime() < that.json.effectiveDate
					}
				}
			},
			//获取公司列表
			getcommoy() {
				let params = {};
				this.post(params, "services/app/common/GetGroupInsurances").then(res => {
					if(res.success) {
						this.options = res.result.items
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}

				});
			},
			//更改公司
			changecomony(val) {
				this.getWorknumber(val)
				this.getdatetype(val)
				let arr = []
				this.json.batchTypeId = ''
				Vue.set(this.json, "staffId", arr)
			},
			//获取工号
			getWorknumber(val) {
				console.log(val)
				let params = {
					id: val
				};
				this.post(params, "services/app/common/GetCurrentInsuranceStaffs").then(res => {
					if(res.success) {
						console.log("num")
						console.log(res)
						this.workoptions = res.result.items
						for(var i = 0; i < this.workoptions.length; i++) {
							if(this.workoptions[i].describe != "") {
								this.workoptions[i].staffAccount = this.workoptions[i].staffAccount + " (" + this.workoptions[i].describe + ")"
							} else {
								this.workoptions[i].staffAccount = this.workoptions[i].staffAccount
							}
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}

				});
			},
			//获取什么日期
			getdatetype(val) {
				let params = {
					insuranceId: val
				};
				this.post(params, "services/app/policy/GetMatchDateHistoryBatchList").then(res => {
					if(res.success) {
						console.log("shuju")
						console.log(res)
						this.chosedates = res.result.matchDate
						this.templatelist = res.result.items
						if(this.templatelist.length == 0) {
							this.json.batchType = 0
						} else {
							this.json.batchType = 1
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}

				});

			},
			//获取历史模板数据
			gethistorylist(val) {
				let params = {
					insuranceId: this.json.insuranceId
				};
				this.post(params, "services/app/policy/GetMatchDateHistoryBatchList").then(res => {
					if(res.success) {
						console.log("shuju")
						console.log(res)
						this.templatelist = res.result.items
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}

				});

			},
			//获取烯烃模板数据
			getsysmlist(val) {
				let params = {
					insuranceId: this.json.insuranceId
				};
				this.post(params, "services/app/policy/GetSystemTemplateList").then(res => {
					if(res.success) {
						console.log("shuju")
						console.log(res)
						this.templatelist = res.result.items
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}

				});

			},
			btn(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						if(this.unli) { //是否不限
							if(this.json.effectiveDate == "" || this.json.effectiveDate === null) {
								this.errormsg = {
									beginerror: true,
									message: '开始时间不能为空'
								}
								return false
							} else {
								this.errormsg = {
									beginerror: false
								}
							}

						} else {
							if(this.json.expiryDate == "" || this.json.expiryDate === null) {
								this.errormsg = {
									enderror: true,
									message: '结束时间不能为空'
								}
								return false
							} else {
								this.errormsg = {
									enderror: false
								}
							}
						}
						if(this.json.batchTypeId == "" && this.json.batchType != 0) {

							this.mubanerror = {
								error: true,
								message: '请选择模板'
							}
							return false
						} else {
							this.mubanerror = {
								error: false,
								message: '请选择模板'
							}
						}
						if(this.json.expiryDate !== "") {
							if(Date.parse(new Date(this.json.effectiveDate)) < Date.parse(new Date(this.json.expiryDate))) {
								//查看冲突
								this.isconflict()
								//不查看冲突
								//this.getdatas()
							} else {
								this.errormsg = {
									beginerror: true,
									enderror: true,
									message: '开始时间不能大于结束时间'
								}
							}
						} else {
							this.errormsg = {
								beginerror: false,
								enderror: false,
							}
							//查看冲突
							this.isconflict()
							//不查看冲突
							//this.getdatas()
						}

					} else {
						return false;
					}
				});

			},
			//更新状态
			toupdate() {
				let IsReward = this.json.isReward ? 1 : 0
				let params = {
					id: this.newid
					//					staffs:this.json.staffId,
					//					effectiveDate:this.json.effectiveDate,
					//					expiryDate:this.json.expiryDate,
					//					isUpperBatch:0,
					//					IsReward:IsReward
				}
				this.post(params, 'services/app/policy/UpdateExpiryDateCreatePolicyBatchNew').then(res => {
					if(res.success) {
						console.log("更新成功")
					} else {
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}
				})
			},
			//查看冲突
			isconflict() {
				this.loading = true;
				console.log(this.json)
				let IsReward = this.json.isReward ? 1 : 0
				let params = {
					staffs: this.json.staffId,
					effectiveDate: this.json.effectiveDate,
					expiryDate: this.json.expiryDate,
					isUpperBatch: 0,
					IsReward: IsReward,
					PolicyBatchId: "",

				}
				this.post(params, 'services/app/policy/CheckEffectivedCreatePolicyBatchNew').then(res => {
					if(res.success) {
						this.loading = false;
						console.log("chongtu")
						console.log(res)
						if(res.result.code == 0) {
							//无冲突
							this.getdatas()
						} else if(res.result.code == -1 || res.result.code == -2) {
							//有冲突 不能提交
							this.candialogTableVisible = true
							this.nowmessage = res.result.message
							this.existence = res.result.items

						} else {
							//有冲突 解决冲突
							this.dialogTableVisible = true
							this.nowmessage = res.result.message
							this.existence = res.result.items
							this.newid = res.result.id
						}

						//						this.existence=res.result.items
						//						if(res.result.items.length>0){
						//							//有冲突
						//							this.dialogTableVisible=true
						//						}else{
						//							//不冲突
						//							this.getdatas()
						//						}
					} else {
						this.loading = false;
						this.$notify.error({
							title: '错误',
							message: res.error.message
						});
					}
				})
			},
			getdatas() {

				if(this.json.batchType == 0) {
					let params = this.json
					this.loading = true
					this.post(params, "services/app/policy/CreateUpperPolicyBatch").then(res => {
						if(res.success) {
							console.log(res)
							// this.loading=false
							if(this.json.batchType == 0 || this.json.batchType == 1) {
								this.$router.push({
									name: "policyupper3c",
									query: {
										batchId: res.result.batchId, //'F52FD076-7E12-4ED5-9AFF-3F79BD8086E9'
										isback:true
									}
								})
							} else {
								this.$router.push({
									name: "policyupper3s",
									query: {
										batchId: res.result.batchId,
										isback:true
									}
								})
							}
						} else {
							this.loading = false;
							this.loadroval = true;
							this.$notify.error({
								title: '错误',
								message: res.error.message
							});

						}

					});
				} else {
					if(this.json.batchTypeId == "") {
						//  this.$message({
						//       message: '请选择模板',
						//       type: 'warning'
						//     });
						this.mubanerror = {
							error: true,
							message: '请选择模板'
						}
					} else {
						this.loading = true
						let params = this.json
						this.post(params, "services/app/policy/CreateUpperPolicyBatch").then(res => {
							if(res.success) {
								// this.loading=true
								console.log(res)
								if(this.json.batchType == 0 || this.json.batchType == 1) {
									this.$router.push({
										name: "policyupper3c",
										query: {
											batchId: res.result.batchId, //'F52FD076-7E12-4ED5-9AFF-3F79BD8086E9'
											isback:true
										}
									})
								} else {
									this.$router.push({
										name: "policyupper3s",
										query: {
											batchId: res.result.batchId,
											isback:true
										}
									})
								}
							} else {
								this.loading = true;
								this.loadroval = true;
								this.$notify.error({
									title: '错误',
									message: res.error.message
								});

							}

						});
					}

				}
			}
		},
		components: {
			titlename,
			datachange
		},
		watch: {
			islimit() {
				if(this.islimit == true) {
					this.json.expiryDate = ""
					this.endateprop = ''
					this.islimits = true
				} else {
					this.endateprop = 'expiryDate'
					this.islimits = false
				}

			},
			'json.batchType': {
				handler: function(n, o) {
					this.json.batchTypeId = ""
					if(this.json.batchType == 0) {
						this.discripute = ""
						this.templatelist = []

					} else if(this.json.batchType == 1) {
						this.discripute = "该模板为近三个月添加的批次"
						this.gethistorylist()

					} else {
						this.discripute = "该模板由智保客整理提供"
						this.getsysmlist()
					}
				},
				deep: true　　
			}, //json.insuranceId
			'json.insuranceId': {
				handler: function(n, o) {
					if(this.json.insuranceId == "") {
						this.iscanedit = true
					} else {
						this.iscanedit = false
					}
				},
				deep: true　　
			},
		}

	}
</script>
<style lang="scss" scoped>
	.content {
		width: 1005px;
		height: 100%;
		margin: 0 auto;
	}
	
	.toblue {
		color: #0099ff;
	}
	
	.informationaa {
		width: 514px;
		margin: 0 auto 28px;
	}
	
	.selects {
		width: 396px;
	}
	
	.informations {
		// margin-bottom: 0;
		position: relative;
		// div {
		// 	position: relative;
		// 	.sscheckbox {
		// 		position: absolute;
		// 		right: -75px;
		// 		top: 0;
		// 		height: 100%;
		// 		width: 80px;
		// 	}
		// }
	}
	
	.btn {
		display: block;
		margin: 10px auto 40px;
	}
	
	.discriputetexts {
		width: 385px;
		// margin-top: 10px;
		font-size: 13px;
		color: #CBCBCB;
	}
	
	.texts {
		width: 385px;
		font-size: 13px;
		color: #CBCBCB;
		letter-spacing: 0;
		text-align: left;
		text-indent: 0;
		line-height: 28px;
		.icon-xuanzhong {
			color: #FF7819;
			font-size: 8px;
		}
		span {
			color: #1989FA;
		}
	}
	
	.modeltype {
		width: 369px;
		height: 28px;
		border-right: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: #ffffff;
		font-size: 12px;
		.tabnav {
			width: 123px;
			height: 28px;
		}
		/*p {
			width: 123px;
			height: 100%;
			border-right: 1px solid #e0e3e9;
			box-sizing: border-box;
			text-align: center;
			cursor: pointer;
		}
		.choseactive {
			background: #1989fa;
			color: white;
		}*/
	}
	
	.dateinp {
		width: 171px;
	}
	
	.line {
		text-align: center;
	}
	
	.selectss {
		height: auto;
		div {
			line-height: 27px;
		}
		padding: 5px 20px;
		.seconr_text {
			color: #CBCBCB;
		}
	}
	
	.information_only {
		margin-bottom: 20px;
	}
	
	.el-button--text {
		display: none!important;
	}
	
	.visi-list {
		width: 100%;
		max-height: 300px;
		border: 1px solid #eee;
		border-bottom: 0;
		overflow-y: auto;
		box-sizing: border-box;
		div {
			width: 50%;
			height: 40px;
			float: left;
			border-bottom: 1px solid #eee;
			line-height: 40px;
		}
		.list_name {
			text-indent: 20px;
			border-right: 1px solid #eee;
		}
		.list_time {
			text-indent: 20px;
		}
	}
</style>